<template>
  <div class="edit" v-if="addressInfo">
    <my-header title="编辑地址">
      <template #right>
        <slot name="right"> &nbsp; </slot>
      </template>
    </my-header>

    <!-- 根据数据渲染页面 -->
    <div class="cells">
      <van-field
        v-model="addressInfo.name"
        placeholder="请输入姓名"
        right-icon="clear"
      />
      <van-field
        v-model="addressInfo.tel"
        placeholder="请输入手机号"
        right-icon="clear"
      />
      <van-cell :title="pca" @click="showPopup" />
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-area
          title="标题"
          :area-list="areaList"
          :value="addressInfo.areaCode"
          @confirm="areaconfirm"
          @cancel="areacancel"
        />
      </van-popup>
      <van-field
        v-model="addressInfo.addressDetail"
        placeholder="请输入详细地址"
        right-icon="clear"
      />
    </div>

    <!-- footer -->
    <div class="editfooter">
      <van-cell>
        <template #title>
          <span class="verify" @click="editAddress">确认</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      addressInfo: null,
      // 省市区
      pca: "",
      areaList,
      show: false,
    };
  },
  methods: {
    areaconfirm(value) {
      // console.log(value);
      this.addressInfo.province = value[0].name;
      this.addressInfo.city = value[1].name;
      this.addressInfo.county = value[2].name;
      this.show = false;
      console.log(this.addressInfo);
    },
    areacancel(value) {
      // console.log(value);
      this.show = false;
    },
    showPopup() {
      this.show = true;
    },
    async editAddress() {
      let res = this.$ajax.changeAddressData(this.addressInfo.uid, {
        name: this.addressInfo.name,
        tel: this.addressInfo.tel,
        province: this.addressInfo.province,
        city: this.addressInfo.city,
        county: this.addressInfo.county,
        addressDetail: this.addressInfo.addressDetail,
      });
      console.log(res);
    },
  },
  mounted() {
    console.log(this.$route);
    this.addressInfo = this.$route.params.item;
    this.pca =
      this.$route.params.item.province +
      " " +
      this.$route.params.item.city +
      " " +
      this.$route.params.item.county;
  },
};
</script>

<style lang="scss" scoped>
.edit {
  width: 100%;
  background: #eee;
  .cell {
    color: black;
  }
  .editfooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    span {
      display: inline-block;
      width: 90%;
      color: #fff;
      height: 40px;
      line-height: 40px;
      background: linear-gradient(to left, #e680ff, #ff80aa);
      border-radius: 20px;
    }
  }
}
</style>